﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Reports</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <link href="../content/css/default.css" rel="stylesheet" type="text/css" />
    <link href="../content/css/component.css" rel="stylesheet" type="text/css" />
    <script src="../content/js/modernizr.custom.js" type="text/javascript"></script>
    <!-- Le styles -->
     <link href="../content/css/reportStyles.css" rel="stylesheet" type="text/css" />
        <link href="../content/css/bootstrapv3.css" rel="stylesheet" />
  

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../js/html5shiv.js"></script>
    <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../ico/apple-touch-icon-144-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../ico/apple-touch-icon-114-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../ico/apple-touch-icon-72-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" href="../ico/apple-touch-icon-57-precomposed.png" />
    <link rel="shortcut icon" href="../ico/favicon.png">
    <script type="text/javascript">
        var tableToExcel = (function () {
            var uri = 'data:application/vnd.ms-excel;base64,'
    , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
    , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
            return function (table, name) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
                window.location.href = uri + base64(format(template, ctx))
            }
        })()
    </script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="shortcut icon" href="../../assets/ico/favicon.png" />
    <!-- Bootstrap core CSS -->
    <link href="../content/css/bootstrapv3.css" rel="stylesheet" />
    <!-- Custom styles -->
    <link href="../content/css/pls.css" rel="stylesheet" />
    <link href="../content/css/seat.css" rel="stylesheet" />
</head>
<body>
    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" style="background-color: #0f99ab;
        border-color: #0f99ab;">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                    </span>
                </button>
                <a class="navbar-brand" href="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav"  >
                    <li>
                        <img src="../content/img/smalllogo.png" /></li>
                    <li><a href="Home.html" style="color:white">HOME</a></li>
                    <li><a href="seatManager.html" style="color:white">SEAT MANAGER</a></li>
                    <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">REQUEST MANAGER
                        <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="https://aims.srv.pointwest.com.ph" target="_blank">Create New Request</a></li>
							<li><a href="RequestManager.html" >Monitoring</a></li>
                        </ul>
                    </li>
                    <li class="active" ><a href="Report.html" style="background-color: #476079;">REPORTS</a></li>
                </ul>
                <div class="searchBar navbar-right">
                    <div class="input-group">
                        <input type="text" class="form-control" />
                        <span class="input-group-btn">
                            <button id="searchBtn" class="btn btn-default" type="button">
                                Go!</button>
                        </span>
						<span class="logout">Logout</span>
                    </div>
                    <!-- /input-group -->
                </div>
                <!-- /.col-lg-6 -->
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
    <div class="container-fluid" id="searchResultsContainer">
        <div class="row-fluid">
            <div id="resultsBox" class="span5">
                <p>
                    Results for: "Stone"</p>
                <div class="result">
                    Tiburcio Stone</div>
                <div class="result">
                    Emma Stone</div>
            </div>
            <div id="personalInfoContainer" class="span7 container-fluid">
                <div class="row-fluid">
                    <div id="pictureBox">
                        <img src="../content/img/emmastone.png" style="height: 100px;width: 100px;"/>
                    </div>
                    <div id="infoBox">
                        <p>
                            Name: Tiburcio Kamote<br />
                            Seat: PIC312412</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="close">
            CLOSE
        </div>
        <div class="row-fluid" id="mapRow">
            <div class="span12" id="searchMap">
                search results map here
                <div class="zoom column">
                    <div class="zoom" id="test">
                        <a href="#">Tiburcio Stone</a>
                    </div>
                    <div class="zoom" id="Div1">
                        <a href="#">Emma Stone</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row rowForBoxes">
        <div class="col-md-3  rBoxes bread">
            Reports
        </div>
        <div class="col-md-2  quadrantBoxes">
            PIC 3F
        </div>
        <div class="col-md-2  quadrantBoxes">
            PIC 4F
        </div>
        <div class="col-md-2  quadrantBoxes">
            PTC 12F
        </div>
        <!-- <div class="col-md-2  quadrantBoxes" style="background-color: #e04e39;">
            LOG OUT
        </div> -->
    </div>
    <div class="row">
        <div class="col-lg-2  rBoxes">
            Executive Office
            <div class="numberOfSeat">
                3</div>
        </div>
        <div class="col-lg-2  rBoxes">
            Training Room 1<div class="numberOfSeat">
                18</div>
        </div>
        <div class="col-lg-2 rBoxes">
            Training Room 2<div class="numberOfSeat">
                18</div>
        </div>
        <div class="col-lg-2  rBoxes">
            Back Office
            <div class="numberOfSeat">
                30</div>
        </div>
        <div class="col-lg-2  rBoxes">
            Reception
            <div class="numberOfSeat">
                1</div>
        </div>
        <div class="col-lg-2  rBoxes">
            Employee Vacant Workstations
            <div class="numberOfSeat">
                6</div>
            <div class="vacant">
            </div>
        </div>
        <div class="col-lg-2  rBoxes">
            PM Vacant Workstations
            <div class="numberOfSeat">
                6</div>
        </div>
        <div class="col-lg-2  rBoxes">
            Total Vacant Workstations
            <div class="numberOfSeat">
                1</div>
        </div>
        <div class="col-lg-2  rBoxes">
            Total Occupied Workstations
            <div class="numberOfSeat">
                500</div>
        </div>
        <div class="col-lg-2  rBoxes">
            Total Number of Workstations
            <div class="numberOfSeat">
                501</div>
        </div>
        <div class="col-lg-5 rBoxes md-trigger" data-modal="modal-5">
            Employee Occupied Workstations </br>
        </div>
        <div class="md-modal md-effect-5" id="modal-5">
            <div class="md-content"  style="font-family: Segoe UI";>
                <h3>
                    Employee Occupied Workstations</h3>
                <div>
                    <p>
                        Seat Summary</p>
                    <table>
                        <thead valign="top">
                            <tr>
                                <th>
                                    Employee Name
                                </th>
                                <th>
                                    Workstation Number
                                </th>
                                <th>
                                    Local
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    Daclag, Kris
                                </td>
                                <td>
                                    PIC3FA12-1
                                </td>
                                <td>
                                    1321
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Magmanlac, Badet
                                </td>
                                <td>
                                    PIC3FA12-2
                                </td>
                                <td>
                                    3241
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Navarrete, Joanne
                                </td>
                                <td>
                                    PIC3FA12-6
                                </td>
                                <td>
                                    1234
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="clearfix">
                    </div>
                   
                    
                    <button class="md-close" style="float: right;">
                        Close </button>
                    <button class="md-close" style="float: left;">
                        Export</button>
                </div>
            </div>
        </div>
        <div class="md-overlay">
            ldkalklasdkaslkdalskdalsd</div>
        <div class="col-lg-5 rBoxes md-trigger" data-modal="modal-5">
            PM Occupied Workstations
        </div>
        <div class="col-lg-5 rBoxes md-trigger" data-modal="modal-4">
            Seats per Quadrant
        </div>
        <div class="md-modal md-effect-5" id="modal-4">
            <div class="md-content">
                <h3>
                    Seats per Quadrant</h3>
                <div>
                    <p>
                        Seat Summary</p>
                    <table>
                        <thead valign="top">
                            <tr>
                                <th>
                                    Employee Name
                                </th>
                                <th>
                                    Workstation Number
                                </th>
                                <th>
                                    Local
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    Daclag, Kris
                                </td>
                                <td>
                                    PIC3FA12-1
                                </td>
                                <td>
                                    1321
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Magmanlac, Badet
                                </td>
                                <td>
                                    PIC3FA12-2
                                </td>
                                <td>
                                    3241
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Navarrete, Joanne
                                </td>
                                <td>
                                    PIC3FA12-6
                                </td>
                                <td>
                                    1234
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="generateButton" style="float: left;">
                        <input type="button" onclick="tableToExcel('3fquadrantTable', 'Report Table')" value="Export to Excel" />
                    </div>
                    <button class="md-close" style="float: left;">
                        Close me</button>
                    <button class="md-close" style="float: left;">
                        Export</button>
                </div>
            </div>
        </div>
        <div class="col-lg-5 rBoxes md-trigger" data-modal="modal-5">
            Seats per Project
        </div>
    </div>
    <!-- /container for search results -->
    <!-- Le javascript
    ================================================== -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../content/js/jquery.zoomooz.min.js" type="text/javascript"></script>
    <script src="../content/js/bootstrapv3.min.js" type="text/javascript"></script>
    <script src="../content/js/dragscrollable.js" type="text/javascript"></script>
    <script src="../content/js/jquery.kinetic.js" type="text/javascript"></script>
    <script src="../content/js/search.js" type="text/javascript"></script>
    <script src="../content/js/classie.js" type="text/javascript"></script>
    <script src="../content/js/modalEffects.js" type="text/javascript"></script>
</body>
</html>
